<template>
  <div class="dashboard-container">
    <div class="page-title">
      <div>
        医护访问情况总览
      </div>
      <div class="">
        <el-select v-model="selHosp" multiple filterable placeholder="选择医院" class="hospital-selector">
          <el-option v-for="item in hospList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker v-model="datePicker" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="onDatePickerChange">
        </el-date-picker>
      </div>
    </div>

    <!-- 今日实时数据 -->
    <el-card class="content-section">
      <div class="section-header" style="margin-bottom: 16px;">
        <div class="section-info">
          <h2 class="section-title">今日实时数据<span class="data-time">数据时间 {{
            todayRealtimeData.updateTime }}</span> </h2>
        </div>
      </div>
      <div class="tag-overview">
        <!-- 访问人数 -->
        <el-card class="tag-type-card">
          <div class="tag-type-header">
            <span class="tag-type-title">访问人数</span>
          </div>
          <div class="data-value">
            {{ todayRealtimeData.visitCount }}<span class="data-unit">人</span>
          </div>
          <div class="data-comparison">
            <div>较昨日 <span :class="getGrowthClass(todayRealtimeData.visitCountGrowth)">{{
              todayRealtimeData.visitCountGrowth }}</span></div>
            <div class="data-comparison-item">7日前 <span :class="getGrowthClass(todayRealtimeData.visitCountGrowth7)">{{
              todayRealtimeData.visitCountGrowth7 }}</span> <!-- ({{
              todayRealtimeData.visitCount7DaysAgo }}人) --></div>
          </div>
        </el-card>

        <!-- 打开次数 -->
        <el-card class="tag-type-card">
          <div class="tag-type-header">
            <span class="tag-type-title">打开次数</span>
          </div>
          <div class="data-value">
            {{ todayRealtimeData.openCount }}<span class="data-unit">次</span>
          </div>
          <div class="data-comparison">
            <div>较昨日 <span :class="getGrowthClass(todayRealtimeData.openCountGrowth)">{{
              todayRealtimeData.openCountGrowth }}</span></div>
            <div class="data-comparison-item">7日前 <span :class="getGrowthClass(todayRealtimeData.openCountGrowth7)">{{
              todayRealtimeData.openCountGrowth7 }}</span> <!-- ({{
              todayRealtimeData.openCount7DaysAgo }}次) --></div>
          </div>
        </el-card>
      </div>
    </el-card>

    <!-- 访问实时数据 -->
    <el-card class="content-section">
      <div class="section-header">
        <div class="section-header-flex">
          <h2 class="section-title">访问实时数据</h2>
          <div class="section-time">数据时间: {{ RealtimeLine }}</div>
        </div>
      </div>
      <!-- 统计部分 -->
      <div>
        <!-- echarts部分 -->
        <div class="real_time">
          <realTimeChart :corpId="corpId" @updateTimeLineTime="updateTimeLineTime"></realTimeChart>
        </div>
      </div>
    </el-card>

    <!-- 核心访问数据 -->
    <el-card class="content-section">
      <div class="section-header" style="margin-bottom: 16px;">
        <div class="section-info">
          <h2 class="section-title">核心访问数据</h2>
        </div>
      </div>
      <div class="core-data-container">
        <!-- 活跃概况 -->
        <div class="core-data-item">
          <div class="core-data-header">
            <div class="next_pre_date">
              <div class="slide">
                <div class="slide-label">活跃概况</div>
                <div class="gary" @click="prevCoreDay" :class="{ disabled: !canGoCorePrev }"><i
                    class="el-icon-arrow-left"></i></div>
                <div class="slide_time">{{ coreDataTime }}</div>
                <div class="gary" @click="nextCoreDay" :class="{ disabled: !canGoCoreNext }"><i
                    class="el-icon-arrow-right"></i></div>
              </div>
            </div>
          </div>
          <div class="core_tag_type">
            <el-card class="tag-type-card" v-for="n in coreData" :key="n.name" v-show="!n.disabled">
              <div class="tag-type-header">
                <span class="tag-type-title">{{ n.name }}</span>
              </div>
              <div class="core-data-value">
                {{ n.value }}<span class="core-data-unit">{{ n.unit }}</span>
              </div>
              <div class="core-data-comparison">
                <div>较昨日 <span :class="getGrowthClass(n.yesterday)">{{ n.yesterday }}</span></div>
              </div>
              <div class="core-data-comparison-seven">
                <div>7日前 <span :class="getGrowthClass(n.sevenDayBefore)">{{ n.sevenDayBefore }}</span></div>
              </div>
            </el-card>
          </div>
        </div>

        <!-- 新增用户概况 -->
        <div class="core-data-item">
          <div class="core-data-header">
            <div class="next_pre_date">
              <div class="slide">
                <div class="slide-label">新增用户概况</div>
                <div class="gary" @click="prevNewUserDay" :class="{ disabled: !canGoNewUserPrev }"><i
                    class="el-icon-arrow-left"></i></div>
                <div class="slide_time">{{ newUserTime }}</div>
                <div class="gary" @click="nextNewUserDay" :class="{ disabled: !canGoNewUserNext }"><i
                    class="el-icon-arrow-right"></i></div>
              </div>
            </div>
          </div>
          <div class="core_tag_type">
            <el-card class="tag-type-card" v-for="n in newUser" :key="n.name" v-show="!n.disabled">
              <div class="tag-type-header">
                <span class="tag-type-title">{{ n.name }}</span>
              </div>
              <div class="core-data-value">
                {{ n.value }}<span class="core-data-unit">{{ n.unit }}</span>
              </div>
              <div class="core-data-comparison">
                <div>较昨日 <span :class="getGrowthClass(n.yesterday)">{{ n.yesterday }}</span></div>
              </div>
              <div class="core-data-comparison-seven">
                <div>7日前 <span :class="getGrowthClass(n.sevenDayBefore)">{{ n.sevenDayBefore }}</span></div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 访问核心指标趋势 -->
    <el-card class="content-section">
      <div class="section-header">
        <div class="section-header-flex">
          <h2 class="section-title">访问核心指标趋势</h2>
          <div class="section-time">{{ getDateRangeText() }}</div>
        </div>
      </div>
      <!-- 统计部分 -->
      <div>
        <!-- echarts部分 -->
        <div class="real_time">
          <coreLineChart :corpId="corpId" :dateRange="datePicker"></coreLineChart>
        </div>
      </div>
    </el-card>
    <!-- TOP10 数据展示 -->
    <el-card class="content-section">
      <div class="section-header" style="margin-bottom: 16px;">
        <div class="section-info">
          <h2 class="section-title">数据访问排行</h2>
        </div>
      </div>
      <div class="top10-container">
        <div class="top10-item">
          <functionTop10  :corpId="corpId" :dateRange="datePicker"></functionTop10>
        </div>
        <div class="top10-item">
          <!-- <pageTop10  :corpId="corpId" :dateRange="datePicker"></pageTop10> -->
        </div>
      </div>
    </el-card>

    <!-- 访问核心功能趋势 -->
    <el-card class="content-section">
      <div class="section-header">
        <div class="section-header-flex">
          <h2 class="section-title">访问核心功能趋势</h2>
          <div class="section-time-container">
            <div class="section-time">{{ getDateRangeText() }}</div>
            <el-button type="primary" size="mini" @click="exportCoreFunctionTrend">
              <i class="el-icon-download"></i> 导出数据
            </el-button>
          </div>
        </div>
      </div>
      <!-- 统计部分 -->
      <div>
        <!-- echarts部分 -->
        <div class="real_time">
          <coreLineVista  :corpId="corpId"  :dateRange="datePicker" @exportData="coreTypeExportData"></coreLineVista>
        </div>
      </div>
    </el-card>

    <!-- 标签详情 -->
    <!-- <el-card class="content-section">
      <div class="section-header" style="margin-bottom: 16px;">
        <div class="section-info">
          <h2 class="section-title">详细数据表格</h2>
        </div>
        <div class="update-info">
          <el-button type="primary" icon="el-icon-download" size="mini">导出数据</el-button>
          <span class="update-frequency">每日更新</span>
          <span class="last-updated">更新于: {{ todayRealtimeData.updateTime }}</span>
        </div>
      </div>


      <el-table :data="detailDataList" class="table-full-width" stripe>
        <el-table-column prop="time" label="时间" min-width="120" sortable="custom">
        </el-table-column>
        <el-table-column prop="hospital" label="医院" min-width="180">
        </el-table-column>
        <el-table-column prop="department" label="科室" min-width="120">
        </el-table-column>
        <el-table-column prop="doctor" label="医生" min-width="120">
        </el-table-column>
        <el-table-column prop="patientInfoManagement" label="患者信息管理" sortable="custom" min-width="160">
        </el-table-column>
        <el-table-column prop="tagManagement" label="分类标签管理" sortable="custom" min-width="160">
        </el-table-column>
        <el-table-column prop="patientCare" label="患者主动关怀" sortable="custom" min-width="160">
        </el-table-column>
        <el-table-column prop="patientReputation" label="患者口碑管理" sortable="custom" min-width="160">
        </el-table-column>
        <el-table-column prop="myTeam" label="我的团队" sortable="custom" min-width="120">
        </el-table-column>
        <el-table-column prop="digitalCode" label="数字专属码" sortable="custom" min-width="140">
        </el-table-column>
        <el-table-column prop="followUpManagement" label="诊后随访管理" sortable="custom" min-width="160">
        </el-table-column>
        <el-table-column prop="appointmentManagement" label="复诊预约管理" sortable="custom" min-width="160">
        </el-table-column>
        <el-table-column prop="materialManagement" label="素材管理" sortable="custom" min-width="120">
        </el-table-column>
        <el-table-column prop="healthEducation" label="健康科普管理" sortable="custom" min-width="160">
        </el-table-column>
        <el-table-column prop="questionnaireManagement" label="问卷管理" sortable="custom" min-width="120">
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pagination.currentPage" :page-sizes="[5, 10, 20, 50]" :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
      </div>
    </el-card> -->

  </div>
</template>

<script>
import realTime from './realTime.vue'
import coreLine from './coreLine.vue';
import functionTop10 from './functionTop10.vue';
import pageTop10 from './pageTop10.vue';
import coreLineVista from './coreLineVista.vue';
import { getTodayVisit } from '@/api/chenlong.js'
export default {
  components: {
    'realTimeChart': realTime,
    'coreLineChart': coreLine,
    'functionTop10': functionTop10,
    'pageTop10': pageTop10,
    'coreLineVista': coreLineVista
  },
  name: 'yihu',   //医护访问情况总览
  data() {
    return {
      // ==================== 基础配置数据 ====================
      corpId: '',
      datePicker: this.getDefaultDateRange(),
      selHosp: [],
      hospList: [],

      // ==================== 今日实时数据模块 ====================
      todayRealtimeData: {
        visitCount: 0,           // 今日访问人数
        openCount: 0,           // 今日打开次数
        visitCountGrowth: '',   // 访问人数较昨日增长
        openCountGrowth: '',    // 打开次数较昨日增长
        visitCountGrowth7: '',  // 访问人数较7日前增长
        openCountGrowth7: '',   // 打开次数较7日前增长
        visitCountYesterday: 0,  // 昨日访问人数
        openCountYesterday: 0,  // 昨日打开次数
        visitCount7DaysAgo: 0,   // 7日前访问人数
        openCount7DaysAgo: 0,    // 7日前打开次数
        updateTime: ''         // 数据更新时间
      },

      // ==================== 核心访问数据模块 ====================
      coreData: [
        { name: '累计用户数', value: '0', unit: '人', yesterday: '+0%', sevenDayBefore: '+0%', color: '#5ace9a', disabled: false },
        { name: '日访问人数', value: '0', unit: '人', yesterday: '+0%', sevenDayBefore: '+0%', color: '#5ace9a', disabled: false },
        { name: '日打开次数', value: '0', unit: '次', yesterday: '+0%', sevenDayBefore: '+0%', color: '#5ace9a', disabled: false },
        { name: '日访问页面数', value: '0', unit: '个', yesterday: '+0%', sevenDayBefore: '+0%', color: '#5ace9a', disabled: true }
      ],

      // ==================== 核心访问数据时间 ====================
      coreDataTime: '', // 活跃概况时间
      newUserTime: '',  // 新增用户概况时间
      currentCoreDate: null, // 活跃概况当前选择的日期
      currentNewUserDate: null, // 新增用户概况当前选择的日期

      // ==================== 新增用户数据模块 ====================
      newUser: [
        { name: '日新增用户', value: '0', unit: '人', yesterday: '+0%', sevenDayBefore: '+0%', color: '#5ace9a', disabled: false },
        { name: '用户当日打开', value: '0', unit: '人', yesterday: '+0%', sevenDayBefore: '+0%', color: '#5ace9a', disabled: false }
      ],
      // ==================== 访问实时数据模块 ====================
      realTimeOptions: {},  // 实时折线图配置
      RealtimeLine: '',  // 实时折线图数据更新时间
      // ==================== 核心指标趋势模块 ====================
      coreLineData: [
        { name: '指标筛选', disabled: false },
        { name: '累计用户数', disabled: false },
        { name: '日访问人数', disabled: false },
        { name: '日打开次数', disabled: false },
        { name: '日访问页面数', disabled: true },
        { name: '日新增用户', disabled: false },
        { name: '日打开次数（新用户）', disabled: false },
      ],

      // ==================== 核心功能趋势模块 ====================
      coreFunctionData: [
        { name: '指标筛选', disabled: false },
        { name: '患者信息管理', disabled: false },
        { name: '分离标签管理', disabled: false },
        { name: '患者主动关怀', disabled: true },
        { name: '患者口碑管理', disabled: false },
        { name: '我的团队', disabled: false },
        { name: '数字专属码', disabled: false },
        { name: '诊后随访管理', disabled: false },
        { name: '复诊预约管理', disabled: false },
        { name: '素材管理', disabled: false },
        { name: '健康科普管理', disabled: false },
        { name: '问卷管理', disabled: false }
      ],
      coreType: '',
      // ==================== 日期选择器配置 ====================
      pickerOptions: {
        shortcuts: [{
          text: '昨日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            start.setHours(0, 0, 0, 0);
            end.setTime(start.getTime() + 3600 * 1000 * 24 - 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '前日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
            start.setHours(0, 0, 0, 0);
            end.setTime(start.getTime() + 3600 * 1000 * 24 - 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const day = start.getDay();
            const diff = start.getDate() - day + (day === 0 ? -6 : 1);
            start.setDate(diff);
            start.setHours(0, 0, 0, 0);
            end.setHours(23, 59, 59, 999);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '上周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const day = start.getDay();
            const diff = start.getDate() - day - 6;
            start.setDate(diff);
            start.setHours(0, 0, 0, 0);
            end.setDate(diff + 6);
            end.setHours(23, 59, 59, 999);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setDate(1);
            start.setHours(0, 0, 0, 0);
            end.setHours(23, 59, 59, 999);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '上月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 1);
            start.setDate(1);
            start.setHours(0, 0, 0, 0);
            end.setDate(0);
            end.setHours(23, 59, 59, 999);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '过去7天',
          onClick(picker) {
            const end = new Date();
            end.setTime(end.getTime() - 3600 * 1000 * 24); // 昨天
            end.setHours(23, 59, 59, 999); // 昨天23:59:59

            const start = new Date();
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 6); // 从昨天往前推6天（总共7天）
            start.setHours(0, 0, 0, 0); // 7天前00:00:00

            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '过去14天',
          onClick(picker) {
            const end = new Date();
            end.setTime(end.getTime() - 3600 * 1000 * 24); // 昨天
            end.setHours(23, 59, 59, 999); // 昨天23:59:59

            const start = new Date();
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 13); // 从昨天往前推13天（总共14天）
            start.setHours(0, 0, 0, 0); // 14天前00:00:00

            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '过去30天',
          onClick(picker) {
            const end = new Date();
            end.setTime(end.getTime() - 3600 * 1000 * 24); // 昨天
            end.setHours(23, 59, 59, 999); // 昨天23:59:59

            const start = new Date();
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 29); // 从昨天往前推29天（总共30天）
            start.setHours(0, 0, 0, 0); // 30天前00:00:00

            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '过去90天',
          onClick(picker) {
            const end = new Date();
            end.setTime(end.getTime() - 3600 * 1000 * 24); // 昨天
            end.setHours(23, 59, 59, 999); // 昨天23:59:59

            const start = new Date();
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 89); // 从昨天往前推89天（总共90天）
            start.setHours(0, 0, 0, 0); // 90天前00:00:00

            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(0, 1);
            start.setHours(0, 0, 0, 0);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

      // ==================== 详细数据表格模块 ====================
      pagination: {
        currentPage: 1,
        pageSize: 5,
        total: 10
      },

      // ==================== 模拟数据（待替换为真实接口数据） ====================
      detailDataList: [
        { time: '2025-07-31 09:00', hospital: '第一人民医院', department: '心内科', doctor: '张医生', patientInfoManagement: 156, tagManagement: 89, patientCare: 45, patientReputation: 23, myTeam: 67, digitalCode: 34, followUpManagement: 78, appointmentManagement: 56, materialManagement: 43, healthEducation: 67, questionnaireManagement: 32 },
        { time: '2025-07-31 10:30', hospital: '妇幼保健院', department: '妇产科', doctor: '李医生', patientInfoManagement: 234, tagManagement: 156, patientCare: 78, patientReputation: 45, myTeam: 89, digitalCode: 56, followUpManagement: 123, appointmentManagement: 89, materialManagement: 67, healthEducation: 98, questionnaireManagement: 54 },
        { time: '2025-07-31 11:15', hospital: '中医院', department: '中医科', doctor: '王医生', patientInfoManagement: 189, tagManagement: 123, patientCare: 67, patientReputation: 34, myTeam: 78, digitalCode: 45, followUpManagement: 98, appointmentManagement: 67, materialManagement: 56, healthEducation: 78, questionnaireManagement: 43 },
        { time: '2025-07-31 14:20', hospital: '第二人民医院', department: '外科', doctor: '刘医生', patientInfoManagement: 278, tagManagement: 198, patientCare: 89, patientReputation: 56, myTeam: 123, digitalCode: 78, followUpManagement: 145, appointmentManagement: 98, materialManagement: 89, healthEducation: 123, questionnaireManagement: 67 },
        { time: '2025-07-31 15:45', hospital: '社区卫生中心', department: '全科', doctor: '陈医生', patientInfoManagement: 123, tagManagement: 87, patientCare: 45, patientReputation: 23, myTeam: 56, digitalCode: 34, followUpManagement: 67, appointmentManagement: 45, materialManagement: 34, healthEducation: 56, questionnaireManagement: 28 },
        { time: '2025-07-31 16:30', hospital: '康复医院', department: '康复科', doctor: '赵医生', patientInfoManagement: 167, tagManagement: 112, patientCare: 56, patientReputation: 34, myTeam: 78, digitalCode: 45, followUpManagement: 89, appointmentManagement: 67, materialManagement: 56, healthEducation: 78, questionnaireManagement: 45 },
        { time: '2025-07-31 17:10', hospital: '肿瘤医院', department: '肿瘤科', doctor: '孙医生', patientInfoManagement: 298, tagManagement: 234, patientCare: 123, patientReputation: 78, myTeam: 156, digitalCode: 89, followUpManagement: 178, appointmentManagement: 134, materialManagement: 112, healthEducation: 145, questionnaireManagement: 89 },
        { time: '2025-07-31 18:00', hospital: '儿童医院', department: '儿科', doctor: '周医生', patientInfoManagement: 345, tagManagement: 267, patientCare: 134, patientReputation: 89, myTeam: 189, digitalCode: 123, followUpManagement: 234, appointmentManagement: 167, materialManagement: 134, healthEducation: 189, questionnaireManagement: 112 },
        { time: '2025-07-31 19:30', hospital: '老年医院', department: '老年科', doctor: '吴医生', patientInfoManagement: 198, tagManagement: 145, patientCare: 78, patientReputation: 45, myTeam: 112, digitalCode: 67, followUpManagement: 123, appointmentManagement: 89, materialManagement: 78, healthEducation: 98, questionnaireManagement: 56 },
        { time: '2025-07-31 20:15', hospital: '专科医院', department: '眼科', doctor: '郑医生', patientInfoManagement: 223, tagManagement: 178, patientCare: 89, patientReputation: 56, myTeam: 134, digitalCode: 78, followUpManagement: 156, appointmentManagement: 112, materialManagement: 89, healthEducation: 123, questionnaireManagement: 67 }
      ]
    };
  },
  computed: {
    realTimeType() {
      return (valueIndex) => {
        //console.log(valueIndex)
        if (this.NavActive == valueIndex) {
          return 'success'
        } else {
          return ''
        }
      }
    },
    // 活跃概况的日期切换判断
    canGoCorePrev() {
      // 判断活跃概况是否可以点击左箭头（前一天）- 可以点击过去时间
      if (!this.currentCoreDate) return false
      // 左箭头总是可以点击，因为可以查看过去的数据
      return true
    },

    canGoCoreNext() {
      // 判断活跃概况是否可以点击右箭头（后一天）- 不能点击未来时间
      if (!this.currentCoreDate) return false
      const today = new Date()
      today.setHours(23, 59, 59, 999)
      const nextDate = new Date(this.currentCoreDate)
      nextDate.setDate(nextDate.getDate() + 1)
      return nextDate <= today
    },

    // 新增用户概况的日期切换判断
    canGoNewUserPrev() {
      // 判断新增用户概况是否可以点击左箭头（前一天）- 可以点击过去时间
      if (!this.currentNewUserDate) return false
      // 左箭头总是可以点击，因为可以查看过去的数据
      return true
    },

    canGoNewUserNext() {
      // 判断新增用户概况是否可以点击右箭头（后一天）- 不能点击未来时间
      if (!this.currentNewUserDate) return false
      const today = new Date()
      today.setHours(23, 59, 59, 999)
      const nextDate = new Date(this.currentNewUserDate)
      nextDate.setDate(nextDate.getDate() + 1)
      return nextDate <= today
    }
  },
  async mounted() {
    await this.GetMyCorpId()
    // 默认获取数据（使用空corpId）
    this.getMyVisitData()
  },

  watch: {
    selHosp: {
      handler(newVal, oldVal) {
        //console.log('selHosp changed:', { newVal, oldVal })

        // 医院选择发生变化时刷新数据
        if (newVal && newVal.length > 0) {
          // 有选择医院时
          this.corpId = newVal.join(',')  // 转换为逗号分隔的字符串
          console.log('Selected hospitals:', this.corpId)

          // 重置核心访问数据的日期为今天
          this.currentCoreDate = new Date()
          this.currentNewUserDate = new Date()
          this.currentCoreDate.setHours(0, 0, 0, 0)
          this.currentNewUserDate.setHours(0, 0, 0, 0)

          // 刷新所有数据
          this.getMyVisitData()
        } else {
          // 没有选择医院时（包括清空的情况）
          //console.log('No hospitals selected, getting data with empty corpId')
          this.corpId = ''  // 设置为空字符串

          // 重置核心访问数据的日期为今天
          this.currentCoreDate = new Date()
          this.currentNewUserDate = new Date()
          this.currentCoreDate.setHours(0, 0, 0, 0)
          this.currentNewUserDate.setHours(0, 0, 0, 0)

          // 使用空corpId获取数据
          this.getMyVisitData()
        }
      },
      deep: true,
      immediate: false  // 不立即执行，避免初始化时触发
    },
    datePicker: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          // 当datePicker变化时，更新活跃概况和新增用户概况的当前日期为datePicker的最后一天
          if (newVal && newVal.length > 0) {
            const lastDay = new Date(newVal[1])
            this.currentCoreDate = lastDay
            this.currentNewUserDate = lastDay
            this.currentCoreDate.setHours(0, 0, 0, 0)
            this.currentNewUserDate.setHours(0, 0, 0, 0)
            
            // 更新时间显示
            this.coreDataTime = this.formatTimeDisplay(this.formatDateForApi(this.currentCoreDate))
            this.newUserTime = this.formatTimeDisplay(this.formatDateForApi(this.currentNewUserDate))
          }
        }
      }
    }
  },
  methods: {
    updateTimeLineTime(time) {
    // console.log("time>>>", time);
     
      this.RealtimeLine = time
    },
    // 获取默认日期范围（过去14天，不包含今天，从昨天开始算）
    getDefaultDateRange() {
      const end = new Date();
      end.setTime(end.getTime() - 3600 * 1000 * 24); // 昨天
      end.setHours(23, 59, 59, 999); // 昨天23:59:59

      const start = new Date();
      start.setTime(end.getTime() - 3600 * 1000 * 24 * 13); // 从昨天往前推13天（总共14天）
      start.setHours(0, 0, 0, 0); // 14天前00:00:00

      return [start, end];
    },
    async GetMyCorpId() { //获取我的医院列表
      await this.$store.dispatch('GetCorpIdInfo')
      this.hospList = this.$store.getters.corpData.map(item => ({
        value: item.corpId,
        label: item.corpName
      }));

      // 默认不选任何医院
      this.selHosp = []
      this.corpId = ''
    },
    nowTimeParams() {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`
    },

    getDateRangeParams() {
      // 获取datePicker的结束时间参数
      if (this.datePicker && this.datePicker.length === 2) {
        const endDate = this.datePicker[1]
        const year = endDate.getFullYear()
        const month = endDate.getMonth() + 1
        const day = endDate.getDate()
        return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`
      }
      // 如果没有选择日期，使用默认的结束时间
      return this.nowTimeParams()
    },
    // ==================== 数据获取方法 ====================
    async getMyVisitData() {  // 获取所有数据
      // 并行获取今日实时数据和核心访问数据
      await Promise.all([
        this.getTodayRealtimeData(),
        this.getCoreVisitData()
      ])
    },

    async getTodayRealtimeData() {  // 获取今日实时数据
      const params = {
        corpId: this.corpId,
        time: this.nowTimeParams()  // 使用今日时间
      }
      const res = await getTodayVisit(params)
      if (res.code == 200) {
        this.updateTodayRealtimeData(res.data)
      }
    },

    async getCoreVisitData() {  // 获取核心访问数据
      // 初始化两个模块的当前选择日期为今天
      if (!this.currentCoreDate) {
        const today = new Date()
        today.setHours(0, 0, 0, 0) // 设置为今天的开始时间
        this.currentCoreDate = today
      }
      if (!this.currentNewUserDate) {
        const today = new Date()
        today.setHours(0, 0, 0, 0) // 设置为今天的开始时间
        this.currentNewUserDate = today
      }

      const params = {
        corpId: this.corpId,
        time: this.getDateRangeParams()  // 使用datePicker的结束时间
      }
      const res = await getTodayVisit(params)
      if (res.code == 200) {
        // 更新时间显示
        this.coreDataTime = this.formatTimeDisplay(this.getDateRangeParams())
        this.newUserTime = this.formatTimeDisplay(this.getDateRangeParams())

        this.updateCoreData(res.data)
        this.updateNewUserData(res.data)
      }
    },

    // ==================== 数据更新方法 ====================
    updateTodayRealtimeData(data) {
      // 更新今日实时数据
      this.todayRealtimeData = {
        //今日实时数据--访问人数
        visitCount: data.todayNumberCount || 0,  // 今日访问人数
        visitCountGrowth: this.formatGrowthRate(data.todayVsYesterdayGrowthNumber),  // 访问人数较昨日增长率
        visitCountGrowth7: this.formatGrowthRate(data.todayVsSevenDaysGrowthNumber),  // 访问人数较7日前增长率
        //今日实时数据--打开次数
        openCount: data.todayCountOpen || 0,  // 今日打开次数
        openCountGrowth: this.formatGrowthRate(data.todayVsYesterdayGrowthOpen),  // 打开次数较昨日增长率
        openCountGrowth7: this.formatGrowthRate(data.todayVsSevenDaysGrowthOpen),  // 打开次数较7日前增长率

        visitCountYesterday: data.yesterdayNumberCount || 0,  // 昨日访问人数
        openCountYesterday: data.yesterdayCountOpen || 0,  // 昨日打开次数
        visitCount7DaysAgo: data.sevenDaysAgoNumberCount || 0,  // 7日前访问人数
        openCount7DaysAgo: data.sevenDaysAgoCountOpen || 0,  // 7日前打开次数
        updateTime: data.updateTime || ''  // 数据更新时间
      }
    },

    updateCoreData(data) {
      // 更新核心访问数据
      this.coreData = [
        {
          name: '累计用户数',
          value: this.formatNumber(data.cumulativeUsers),
          unit: '人',
          yesterday: this.formatGrowthRate(data.todayVsYesterdayGrowthUser),
          sevenDayBefore: this.formatGrowthRate(data.todayVsSevenDaysGrowthUser),
          color: '#5ace9a',
          disabled: false
        },
        {
          name: '日访问人数',
          value: data.todayNumberCount || '0',
          unit: '人',
          yesterday: this.formatGrowthRate(data.todayVsYesterdayGrowthNumber),
          sevenDayBefore: this.formatGrowthRate(data.todayVsSevenDaysGrowthNumber),
          color: '#5ace9a',
          disabled: false
        },
        {
          name: '日打开次数',
          value: data.todayCountOpen || '0',
          unit: '次',
          yesterday: this.formatGrowthRate(data.todayVsYesterdayGrowthOpen),
          sevenDayBefore: this.formatGrowthRate(data.todayVsSevenDaysGrowthOpen),
          color: '#5ace9a',
          disabled: false
        },
        {
          name: '日访问页面数',
          value: '0',
          unit: '个',
          yesterday: '+0%',
          sevenDayBefore: '+0%',
          color: '#5ace9a',
          disabled: true
        }
      ]
    },

    updateNewUserData(data) {
      // 更新新增用户数据
      this.newUser = [
        {
          name: '日新增用户',
          value: data.todayNewUserCount || '0',
          unit: '人',
          yesterday: this.formatGrowthRate(data.todayVsYesterdayGrowthNewUser),
          sevenDayBefore: this.formatGrowthRate(data.todayVsSevenDaysGrowthNewUser),
          color: '#5ace9a',
          disabled: false
        },
        {
          name: '用户当日打开',
          value: data.todayNewUsersOpenCount || '0',
          unit: '人',
          yesterday: this.formatGrowthRate(data.todayVsYesterdayOpenNewUser),
          sevenDayBefore: this.formatGrowthRate(data.todayVsSevenDaysOpenNewUser),
          color: '#5ace9a',
          disabled: false
        }
      ]
    },

    formatNumber(num) {
      // 格式化数字显示
      if (!num) return '0'
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num.toString()
    },

    formatGrowthRate(rate) {
      // 格式化增长率显示
      if (!rate && rate !== 0) return '0%'
      const numRate = parseFloat(rate)
      if (isNaN(numRate)) return '0%'
      if (numRate === 0) return '0%'  // 0值不显示加号
      return (numRate > 0 ? '+' : '') + numRate.toFixed(2) + '%'
    },

    getGrowthClass(rate) {
      // 获取增长率样式类
      if (!rate && rate !== 0) return ''
      const numRate = parseFloat(rate)
      if (isNaN(numRate)) return ''
      if (numRate === 0) return '' // 0值不变色
      return numRate > 0 ? 'growth-positive' : 'growth-negative'
    },

    getDateRangeText() {
      // 获取日期范围文本
      if (this.datePicker && this.datePicker.length === 2) {
        const start = this.datePicker[0]
        const end = this.datePicker[1]
        const startStr = `${start.getFullYear()}/${start.getMonth() + 1}/${start.getDate()}`
        const endStr = `${end.getFullYear()}/${end.getMonth() + 1}/${end.getDate()}`
        return `${startStr} - ${endStr}`
      }
      return ''
    },

    async onDatePickerChange() {
      // 日期选择器变化时，重新获取核心访问数据
      await this.getCoreVisitData()
    },

    formatTimeDisplay(timeStr) {
      // 格式化时间显示
      if (!timeStr) return '暂无数据'
      const date = new Date(timeStr)
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const weekDay = weekDays[date.getDay()]
      return `${weekDay} ${year}/${month}/${day}`
    },

    // 活跃概况的日期切换方法
    async prevCoreDay() {
      // 活跃概况左箭头（前一天）- 可以点击过去时间
      if (!this.canGoCorePrev) return

      const newDate = new Date(this.currentCoreDate)
      newDate.setDate(newDate.getDate() - 1) // 左箭头是前一天
      newDate.setHours(0, 0, 0, 0) // 确保设置为当天的开始时间

      this.currentCoreDate = newDate
      await this.updateCoreDataByDate()
    },

    async nextCoreDay() {
      // 活跃概况右箭头（后一天）- 不能点击未来时间
      if (!this.canGoCoreNext) return

      const newDate = new Date(this.currentCoreDate)
      newDate.setDate(newDate.getDate() + 1) // 右箭头是后一天
      newDate.setHours(0, 0, 0, 0) // 确保设置为当天的开始时间

      this.currentCoreDate = newDate
      await this.updateCoreDataByDate()
    },

    // 新增用户概况的日期切换方法
    async prevNewUserDay() {
      // 新增用户概况左箭头（前一天）- 可以点击过去时间
      if (!this.canGoNewUserPrev) return

      const newDate = new Date(this.currentNewUserDate)
      newDate.setDate(newDate.getDate() - 1) // 左箭头是前一天
      newDate.setHours(0, 0, 0, 0) // 确保设置为当天的开始时间

      this.currentNewUserDate = newDate
      await this.updateNewUserDataByDate()
    },

    async nextNewUserDay() {
      // 新增用户概况右箭头（后一天）- 不能点击未来时间
      if (!this.canGoNewUserNext) return

      const newDate = new Date(this.currentNewUserDate)
      newDate.setDate(newDate.getDate() + 1) // 右箭头是后一天
      newDate.setHours(0, 0, 0, 0) // 确保设置为当天的开始时间

      this.currentNewUserDate = newDate
      await this.updateNewUserDataByDate()
    },

    async updateCoreDataByDate() {
      // 根据选择的日期更新活跃概况数据
      const params = {
        corpId: this.corpId,
        time: this.formatDateForApi(this.currentCoreDate)
      }
      const res = await getTodayVisit(params)
      if (res.code == 200) {
        // 更新时间显示
        this.coreDataTime = this.formatTimeDisplay(this.formatDateForApi(this.currentCoreDate))

        this.updateCoreData(res.data)
      }
    },

    async updateNewUserDataByDate() {
      // 根据选择的日期更新新增用户概况数据
      const params = {
        corpId: this.corpId,
        time: this.formatDateForApi(this.currentNewUserDate)
      }
      const res = await getTodayVisit(params)
      if (res.code == 200) {
        // 更新时间显示
        this.newUserTime = this.formatTimeDisplay(this.formatDateForApi(this.currentNewUserDate))

        this.updateNewUserData(res.data)
      }
    },

    formatDateForApi(date) {
      // 格式化日期为API需要的格式
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`
    },

    changeTab(index) {
      if (this.NavActive == index) return
      this.NavActive = index
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.currentPage = 1
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.currentPage = val
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    goToPage() {
      const page = parseInt(this.currentPage);
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
      } else {
        this.$message.error('请输入有效的页码（1-' + this.totalPages + '）');
      }
    },

    coreTypeExportData(type) {
      this.coreType = type
    },

    // 导出访问核心功能趋势数据
    exportCoreFunctionTrend() {
      // 生成文件名：访问核心功能趋势_20250925
      const today = new Date()
      const year = today.getFullYear()
      const month = String(today.getMonth() + 1).padStart(2, '0')
      const day = String(today.getDate()).padStart(2, '0')
      const fileName = `访问核心功能趋势_${year}${month}${day}.xlsx`

      const params = {
        corpId: this.corpId,
        startTime: this.formatDateForApi(this.datePicker[0]),
        endTime: this.formatDateForApi(this.datePicker[1]),
        type:this.coreType
      }
     
      this.download('/business/data/statistics/exportDetailedDataTable', params, fileName)
    }

  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f4f7fc;
  min-height: calc(100vh - 84px);
}

.page-title {
  font-size: 31px; // 原 28px → +3px
  font-weight: 600;
  color: #333333;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid #4a90e2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content-section {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px 20px 0 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.nav_btn {
  width: 360px;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
}

.nav_btn_core_line {
  width: 800px;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
}

.nav_btn_function_line {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1%;
  align-content: flex-start;

  .el-button {
    flex: 1;
    min-width: 0;
    margin: 0 1%;
    margin-top: 8px;
  }
}

.real_time {
  width: 100%;
  height: 370px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  //margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dddddd;

  .section-title {
    font-size: 23px; // 原 20px → +3px
    font-weight: 600;
    margin: 0;
    border-left: 4px solid #4a90e2;
    padding-left: 12px;
  }
}

.next_pre_date {
  display: flex;
  align-items: center;
  font-size: 23px; // 原 20px → +3px
  font-weight: 600;
  margin: 0;
  border-left: 4px solid #4a90e2;
  padding-left: 12px;
  line-height: 1;

  .slide {
    margin-left: 40px;
    display: flex;
    align-items: center;
    line-height: 1;
    font-size: 17px;

    .slide_time {
      color: #777;
      margin: 0 5px;
    }

    .gary {
      cursor: pointer;
      background-color: #e6e6e6;

      &.disabled {
        cursor: not-allowed;
        background-color: #f5f5f5;
        opacity: 0.5;
      }
    }
  }
}

.tag-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.core_tag_type {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  min-width: 0;

  .tag-type-card {
    min-width: 250px; // 增加最小宽度
    width: 100%;
    box-sizing: border-box;
    padding: 20px; // 增加内边距
  }
}

.tag-type-card {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #dddddd;

  .tag-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .tag-type-title {
    font-size: 21px; // 原 18px → +3px
    font-weight: 600;
  }
}

.tag-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 15px; // 原 12px → +3px
  color: white;
}

.tag-badge.hospital {
  background-color: #4a90e2;
}

.tag-badge.personal {
  background-color: #50e3c2;
}

.tag-type-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-item {
  text-align: center;
  padding: 12px;
  background: #f4f7fc;
  border-radius: 8px;
}

.stat-value {
  font-size: 27px; // 原 24px → +3px
  font-weight: 700;
  color: #4a90e2;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 17px; // 原 14px → +3px
  color: #888888;
}

.update-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #888888;
  font-size: 12px;
}

.update-frequency {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(74, 144, 226, 0.1);
  border-radius: 4px;
  white-space: nowrap;
  font-size: 16px; // 原 12px → +3px
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #409eff;
    color: #ffffff;
    transform: scale(1.05);
  }
}

.update-frequency::before {
  content: "⟳";
  font-size: 17px;
}

.last-updated {
  font-size: 15px;
  white-space: nowrap;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #dddddd;
}

.page-info {
  color: #888888;
  font-size: 14px;
}

.page-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.el-button+.el-button {
  margin-left: 0;
}



.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltip-text {
  visibility: hidden;
  width: 200px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 4px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 15px; // 原 12px → +3px
  line-height: 1.4;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
  margin-bottom: 30px;
  // display: flex;
  // align-items: center;
  // justify-content: center;

  /* ====== 加大 el-pagination 分页组件内所有文字的字号 ====== */
  ::v-deep .el-pagination {
    font-size: 16px;
    /* 整体基础字号，影响整体布局（可选） */
  }

  /* 页码按钮（比如 1 2 3 4 5 ...） */
  ::v-deep .el-pagination .el-pager li {
    font-size: 16px !important;
    min-width: 32px; // 可选：让页码按钮稍宽一点，配合大字号更舒适
    height: 32px; // 可选：高度也稍大，按钮更协调
    line-height: 32px;
  }

  /* 上一页 / 下一页 按钮 */
  ::v-deep .el-pagination .btn-prev,
  ::v-deep .el-pagination .btn-next {
    font-size: 16px !important;
    min-width: 32px;
    height: 32px;
    line-height: 32px;
  }

  /* 总条数（比如：共 100 条） */
  ::v-deep .el-pagination .el-pagination__total {
    // display: flex;
    // align-items: center;
    font-size: 16px !important;
    line-height: 2.2;
  }

  /* 每页条数选择器（sizes）的文本和按钮 */
  ::v-deep .el-pagination .el-pagination__sizes {
    font-size: 16px !important;
  }

  ::v-deep .el-pagination .el-pagination__sizes .el-input .el-input__inner {
    font-size: 16px !important;
    height: 32px; // 可选：让输入框高度与大字号匹配
  }

  /* 跳转至输入框（比如：跳至 1 页） */
  ::v-deep .el-pagination .el-pagination__jump {
    font-size: 16px !important;
    line-height: 2.2;
  }

  ::v-deep .el-pagination .el-pagination__jump .el-input .el-input__inner {
    font-size: 16px !important;
    height: 32px;
  }

  /* 当前选中页码样式（可选美化） */
  ::v-deep .el-pagination .el-pager li.active {
    font-size: 16px !important;
    font-weight: 600; // 可选：加粗当前页
    color: #409eff; // Element 默认主题色，可保持或自定义
  }
}

/* ======================== 新增：表格内字体加大 3px ======================== */
/* 表头 th 字体 */
::v-deep .el-table .el-table__header th {
  font-size: 17px !important; // 原一般为 14px，+3px → 17px
  font-weight: 600;
  color: #303133;
}

/* 表格单元格 td 字体 */
::v-deep .el-table .el-table__body td {
  font-size: 17px !important; // 原一般为 14px，+3px → 17px
  color: #606266;
}

::v-deep .el-tabs__item {
  font-size: 18px !important;
  font-weight: 500;
}

::v-deep .el-tabs__item.is-active {
  font-size: 18px !important;
  font-weight: 600;
  color: #409eff;
}

.table-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  min-width: 1500px;
  flex-shrink: 0;

  .el-table {
    min-width: 1200px !important;
    table-layout: fixed !important;

    ::v-deep .el-table__header-wrapper,
    ::v-deep .el-table__body-wrapper {
      min-width: 1200px !important;
    }

    ::v-deep .el-table__header th,
    ::v-deep .el-table__body td {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  /* 可选美化滚动条 */
  &::-webkit-scrollbar {
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
  }
}

/* 过渡动画样式 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1.5s ease-in-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* TOP10 容器样式 */
.top10-container {
  display: flex;
  gap: 20px;
  width: 100%;

  .top10-item {
    flex: 1;
    min-width: 0;
    /* 防止内容溢出 */
  }
}

/* 核心数据容器样式 */
.core-data-container {
  display: flex;
  gap: 20px;
  width: 100%;

  .core-data-item {
    width: 55%;
    min-width: 500px;
    flex-shrink: 0;

    .core-data-header {
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #dddddd;
    }
  }
}

/* 150%缩放优化 */
@media (max-width: 1400px) {
  .core-data-item {
    width: 50%;
    min-width: 450px;
    flex-shrink: 1;
  }

  .core_tag_type {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .tag-type-card {
    min-width: 220px; // 增加最小宽度
    padding: 16px; // 增加内边距
  }

  /* 字体等比缩放 */
  .tag-type-title {
    font-size: 18px !important;
  }

  .core-data-header .slide {
    font-size: 15px;
  }

  .core-data-header .slide_time {
    font-size: 15px;
  }

  /* TOP10模块150%缩放优化 */
  .top10-container {
    gap: 16px;
  }

  .top10-item {
    min-width: 280px;
    max-width: 48%;
    overflow: hidden;
  }

  /* 防止按钮和条超出 */
  .top10-item ::v-deep .el-button {
    font-size: 14px;
    padding: 8px 12px;
    margin: 2px;
  }

  .top10-item ::v-deep .el-progress {
    margin: 4px 0;
  }

  .top10-item ::v-deep .el-progress__text {
    font-size: 12px;
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {

  .top10-container,
  .core-data-container {
    flex-direction: column;
    gap: 16px;

    .top10-item {
      width: 100%;
      max-width: 100%;
      min-width: 300px;

      /* 中等屏幕TOP10优化 */
      ::v-deep .el-button {
        font-size: 13px;
        padding: 6px 10px;
        margin: 1px;
      }

      ::v-deep .el-progress {
        margin: 3px 0;
      }

      ::v-deep .el-progress__text {
        font-size: 11px;
      }
    }

    .core-data-item {
      width: 100%;
      min-width: 400px;
    }
  }

  .core_tag_type {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .core_tag_type {
    grid-template-columns: 1fr;

    .tag-type-card {
      min-width: 200px; // 增加最小宽度
      padding: 16px; // 增加内边距
    }
  }

  /* 小屏幕TOP10优化 */
  .top10-item {
    min-width: 250px;
  }

  .top10-item ::v-deep .el-button {
    font-size: 12px;
    padding: 4px 8px;
    margin: 1px;
  }

  .top10-item ::v-deep .el-progress {
    margin: 2px 0;
  }

  .top10-item ::v-deep .el-progress__text {
    font-size: 10px;
  }
}

/* ==================== 组件样式模块化 ==================== */

/* 页面头部区域 */
.page-title {
  .hospital-selector {
    margin-right: 50px;
    width: 300px;
  }
}

/* 数据展示卡片 */
.tag-type-card {
  .data-value {
    font-size: 19px;

    .data-unit {
      font-size: 15px;
    }
  }

  .data-comparison {
    display: flex;
    align-items: center;
    font-size: 17px;
    margin-top: 10px;
    color: #666;

    &-item {
      margin-left: 16px;
    }

    .growth-positive {
      color: #67c23a;
      font-weight: 600;
    }

    .growth-negative {
      color: #f56c6c;
      font-weight: 600;
    }
  }
}

/* 区域头部 */
.section-header {
  .section-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .section-time {
      margin-left: 40px;
      color: #666;
      font-size: 16px;
    }

    .section-time-container {
      display: flex;
      align-items: center;
      gap: 12px;
    }
  }

  .data-time {
    font-size: 20px;
    color: #999;
    margin-left: 20px;
  }
}

/* 核心数据模块 */
.core-data-item {
  .slide {
    .slide-label {
      margin-right: 10px;
    }
  }

  .core-data-value {
    font-size: 19px;

    .core-data-unit {
      font-size: 15px;
    }
  }

  .core-data-comparison {
    display: flex;
    align-items: center;
    font-size: 17px;
    margin-top: 10px;
    color: #666;
    white-space: nowrap;

    &-item {
      margin-left: 16px;
    }

    .growth-positive {
      color: #67c23a;
      font-weight: 600;
    }

    .growth-negative {
      color: #f56c6c;
      font-weight: 600;
    }
  }

  .core-data-comparison-seven {
    display: flex;
    align-items: center;
    font-size: 17px;
    margin-top: 8px;
    color: #666;
    white-space: nowrap;

    .growth-positive {
      color: #67c23a;
      font-weight: 600;
    }

    .growth-negative {
      color: #f56c6c;
      font-weight: 600;
    }
  }
}

/* 表格组件 */
.el-table {
  &.table-full-width {
    width: 100%;
  }
}

</style>